import { View, Text, StyleSheet, TouchableOpacity, Animated } from "react-native"
import { theme } from "../../constants/theme"

interface SplitSpellCardProps {
    parts: string[]
    phonetic: string
    type?: string
    meaning?: string
    showHint: boolean
    slotsOpacity: Animated.Value
    cardOpacity?: Animated.Value
    selectedParts: string[]
    onPartSelect: (part: string) => void
    onPartRemove: (index: number) => void
    feedback: {
        type: "success" | "error" | null
        message: string
    }
}

export function SplitSpellCard({
    parts,
    phonetic,
    type,
    meaning,
    showHint,
    slotsOpacity,
    cardOpacity,
    selectedParts,
    onPartSelect,
    onPartRemove,
    feedback,
}: SplitSpellCardProps) {
    return (
        <Animated.View style={[styles.container, cardOpacity && { opacity: cardOpacity }]}>


            {/* 单词槽 */}
            <Animated.View style={[styles.slots, { opacity: slotsOpacity }]}>
                {parts.map((part, index) => (
                    <TouchableOpacity
                        key={index}
                        style={[styles.slot, selectedParts[index] && styles.slotFilled]}
                        onPress={() => selectedParts[index] && onPartRemove(index)}
                        activeOpacity={selectedParts[index] ? 0.7 : 1}
                    >
                        <Text style={styles.slotText}>{showHint ? part : selectedParts[index] || ""}</Text>
                    </TouchableOpacity>
                ))}
            </Animated.View>
            <View style={styles.wordInfo}>
                <Text style={styles.phonetic}>{phonetic}</Text>
                {type && <Text style={styles.type}>{type}</Text>}
                {meaning && <Text style={styles.meaning}>{meaning}</Text>}
            </View>

            {/* 反馈提示 - 固定区域 */}
            <View style={styles.feedbackArea}>
                {feedback.type && (
                    <View
                        style={[
                            styles.feedbackContainer,
                            feedback.type === "success" ? styles.successFeedback : styles.errorFeedback,
                        ]}
                    >
                        <Text style={[styles.feedbackText, feedback.type === "success" ? styles.successText : styles.errorText]}>
                            {feedback.message}
                        </Text>
                    </View>
                )}
            </View>

            {/* 选择按钮 */}
            <View style={styles.partsContainer}>
                {parts.map((part, index) => (
                    <TouchableOpacity
                        key={index}
                        style={[styles.partButton, selectedParts.includes(part) && styles.partButtonSelected]}
                        onPress={() => onPartSelect(part)}
                    >
                        <Text style={[styles.partButtonText, selectedParts.includes(part) && styles.partButtonTextSelected]}>
                            {part}
                        </Text>
                    </TouchableOpacity>
                ))}
            </View>
        </Animated.View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: "100%",
        alignItems: "center",
        paddingTop: 20,
    },
    slots: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "center",
        gap: theme.spacing.md,
        marginTop: theme.spacing.md,
        marginBottom: theme.spacing.md,
        maxWidth: "100%",
    },
    slot: {
        width: 50,
        height: 4,
        borderRadius: 2,
        backgroundColor: theme.colors.neutral.darkGray,
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        marginBottom: 30,
    },
    slotFilled: {
        backgroundColor: theme.colors.primary.default,
    },
    slotText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
        position: "absolute",
        top: -25,
        textAlign: "center",
        width: 50,
    },
    wordInfo: {
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    phonetic: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        marginBottom: theme.spacing.sm,
    },
    type: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        marginBottom: theme.spacing.sm,
    },
    meaning: {
        fontSize: theme.fontSize.lg,
        color: theme.colors.neutral.black,
        textAlign: "center",
    },
    feedbackArea: {
        height: 70,
        justifyContent: "center",
        alignItems: "center",
        marginVertical: theme.spacing.md,
    },
    feedbackContainer: {
        paddingVertical: theme.spacing.sm,
        paddingHorizontal: theme.spacing.lg,
        borderRadius: theme.borderRadius.large,
        marginVertical: theme.spacing.md,
    },
    successFeedback: {
        backgroundColor: "rgba(52, 199, 89, 0.1)",
        borderWidth: 1,
        borderColor: theme.colors.secondary.green.default,
    },
    errorFeedback: {
        backgroundColor: "rgba(255, 59, 48, 0.1)",
        borderWidth: 1,
        borderColor: theme.colors.secondary.red.default,
    },
    feedbackText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        textAlign: "center",
    },
    successText: {
        color: theme.colors.secondary.green.default,
    },
    errorText: {
        color: theme.colors.secondary.red.default,
    },
    partsContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "center",
        gap: theme.spacing.md,
        marginTop: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
    },
    partButton: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.neutral.white,
        borderWidth: 1,
        borderColor: theme.colors.primary.default,
        minWidth: 60,
        alignItems: "center",
    },
    partButtonSelected: {
        backgroundColor: theme.colors.primary.light,
        borderColor: theme.colors.primary.default,
    },
    partButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.primary.default,
    },
    partButtonTextSelected: {
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
})

